<template>
  <a-modal :title="`兑换记录`" style="top: 100px;" :visible="true" width="1000px" @cancel="handleCancel">
    <div class="tips">
    </div>
    <a-table class="product-table" :rowKey="row => row.id" :dataSource="list" bordered :pagination="false" size="small">

      <a-table-column title="ID" width="20px">
        <template slot-scope="row">
          <div>{{ row.id }}</div>
        </template>
      </a-table-column>
      <a-table-column title="用户" width="30px">
        <template slot-scope="row">
          <div class="user">
            <img :src="row.user.headimg" alt="用户头像">
            <span>{{ row.user.name }}</span>
            <!-- <a-icon class="gender-man" v-if="row.user.gender==='男'" type="man" />
            <a-icon class="gender-woman" v-else type="woman" /> -->

            <a-tag color="red" style="margin-left: 10px;" v-if="row.user.client_type === 'ali'">天猫用户</a-tag>
          </div>
        </template>
      </a-table-column>
      <a-table-column title="兑换礼品" key="number" width="100px">
        <template slot-scope="row">
          <div>
            {{row.sku.title}}
          </div>
        </template>
      </a-table-column>

      <a-table-column title="兑换时间" key="number" width="60px">
        <template slot-scope="row">
          <div>
            {{row.created_at}}
          </div>
        </template>
      </a-table-column>

    </a-table>
  </a-modal>
</template>
<script>
  // import UploadImages from '@/components/UploadImages/UploadImages'
  import iSwitch from '@/components/ISwitch/ISwitch'

  export default {
    components: {
      // UploadImages,
      iSwitch
    },
    props: {
      info: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    data() {
      return {
        current:  {},
        isEditNeedCard: false,
        list: [],
        cardList: []
      }
    },
    watch: {
      uuid() {
        this.initList()
      },
    },
    created() {
      this.initList()
    },
    methods: {
      initList() {
        this.$http.get(`/jika/swap-records`, {
          params: {
            task_id: this.info.id
          }
        }).then(res => {
          this.list = res.data.list
        })
      },
      handleCancel() {
        this.$emit('refresh')
        this.$emit('close')
      },
      handleSave() {
        this.$emit('refresh')
        this.$emit('close')
        // this.$http.put(`/activities/${this.uuid}/skus/batch`, {
        //   list: this.list
        // }).then(res => {
        //   this.$message.success('保存成功')
        //   this.initList()
        // })
      },
      handleDelete(row) {
        this.$confirm({
          title: '提示',
          content: `确认删除吗？`,
          onOk: () => {
            this.$http.delete(`/jika/tasks/${row.uuid}`).then(res => {
              this.$message.success('删除成功')
              this.initList()
            })
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .thumb {
    width: 60px;
    // height: 60px;
    border-radius: 6px;
  }
  .btn-c {
    display: flex;
    // margin-top: 30px;
    padding: 0rpx 30rpx;

    .add {}

    .save {
      margin-right: 20px;
    }

    .cancel {}
  }

  .tips {
    color: gray;
    font-size: 90%;
    margin-bottom: 10px;
  }

  a-input {
    display: inline;
  }

  .user {
    display: flex;
    // flex-wrap: wrap;
    align-items: center;

    img {
      width: 26px;
      height: 26px;
      margin-right: 6px;
      border-radius: 50%;
      overflow: hidden;
    }

    .gender-man,
    .gender-woman {
      margin-left: 5px;
      font-size: 12px;
    }

    .gender-man {
      color: #409EFF;
    }

    .gender-woman {
      color: #F56C6C;
    }
  }
</style>
